<template>
  <!-- 客户转化分析 -->
<div class="customer-conversion">
   <div class="head" style="padding-left: 20px;">
           <el-row style="line-height: 80px;font-weight: 700;">客户转化分析</el-row>
    </div>
    <div class="content">

   
    <el-row style="text-align:center">
        <el-col :span="12" >
        <el-row :span="6">
           <el-col :span="12" class="row-margin headTitle" >新客访问人数</el-col>
           <el-col :span="12" class="headTitle">转化率</el-col>
        </el-row>
        <el-row :span="6" type="flex" align="middle">
            <el-col :span="12">
               <el-row style="font-size: 30px;">200</el-row>
               <el-row class="dateStyle">昨日</el-row>
            </el-col>
            <el-col :span="12">
                <el-progress type="circle" :percentage="20"></el-progress>

            </el-col>
        </el-row>
        <el-row :span="6" type="flex" align="middle">
            <el-col :span="12">
               <el-row style="font-size: 30px;">200</el-row>
               <el-row class="dateStyle">前日</el-row>
            </el-col>
            <el-col :span="12">                <el-progress type="circle" :percentage="20"></el-progress>
</el-col>
        </el-row>
        <el-row :span="6" type="flex" align="middle">
            <el-col :span="12">
               <el-row style="font-size: 30px;">200</el-row>
               <el-row class="dateStyle">一周前</el-row>
            </el-col>
            <el-col :span="12">                <el-progress type="circle" :percentage="20"></el-progress>
</el-col>
        </el-row>
     </el-col>
     <el-col :span="12">
        <el-row :span="6">
           <el-col :span="12" class="row-margin headTitle">会员访问人数</el-col>
           <el-col :span="12"  class="headTitle">转化率</el-col>
        </el-row>
        <el-row :span="6" type="flex" align="middle">
            <el-col :span="12">
               <el-row style="font-size: 30px;">200</el-row>
               <el-row class="dateStyle">昨日</el-row>
            </el-col>
            <el-col :span="12">
                <el-progress type="circle" :percentage="20"></el-progress>

            </el-col>
        </el-row>
        <el-row :span="6" type="flex" align="middle">
            <el-col :span="12">
               <el-row style="font-size: 30px;">200</el-row>
               <el-row class="dateStyle">前日</el-row>
            </el-col>
            <el-col :span="12">                <el-progress type="circle" :percentage="20"></el-progress>
</el-col>
        </el-row>
        <el-row :span="6" type="flex" align="middle">
            <el-col :span="12">
               <el-row style="font-size: 30px;">200</el-row>
               <el-row class="dateStyle">一周前</el-row>
            </el-col>
            <el-col :span="12">                <el-progress type="circle" :percentage="20"></el-progress>
</el-col>
        </el-row>
     </el-col>

    </el-row>
   </div>
</div>
</template>

<script>
export default {

}
</script>

<style scoped>

.col-flex {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
}
.row-margin {
   margin-bottom:30px
}
.headTitle {
   font-size: 13px;
   color: #999;
}
.dateStyle {
   font-size: 14px;
   color: #999;
}
</style>